﻿Vue.component('modal', {
    template: '<div class="modal-mask":class="addClass" v-show="show" transition="modal">' +
        '<div class="modal-wrapper">' +
        '<div class="modal-container" :style="style">' +
        '<div class="modal-header">' +
        '<slot name="header">标题</slot>' +
        '<em class="close" @click="close()">' +
        '<i></i>' +
        '</em>' +
        '</div>' +
        '<div class="modal-body" v-bind:class="{\'inner-scroll\': innerScroll}">' +
        '<slot name="body">内容</slot>' +
        '</div>' +
        '<div class="modal-footer">' +
        '<slot name="footer">' +
        //'<button class="btn" @click="close()" style="width:80px">确定</button>' +
        '<a class="revision-btn" href="javascript:;" @click="close()">确定</a>'+
        '</slot>' +
        '</div>' +
        '</div>' +
        '</div>' +
        '</div>',
    props: {
        show: {
            type: Boolean,
            required: true,
            twoWay: true
        },
        addClass: {
            type: String,
            required: false,
            default: ''
        },
        style: Object,
        init: Function,
        beforeClose: Function,
        isClose: {
            type: Boolean,
            required: false,
            default: true
        },
        innerScroll: {
            type: Boolean,
            required: false,
            default: false
        }
    },
    ready: function() {
        if (typeof this.init === 'function') {
            this.init();
        }
    },
    watch: {
        show(isShow) {
            if (isShow) {
                document.querySelector('body').style.overflowY = 'hidden';
            } else {
                document.querySelector('body').style.overflowY = 'auto';
            }
        }
    },
    methods: {
        close: function () {
            if (typeof this.beforeClose === 'function') {
                if (this.beforeClose() === false) {
                    return;
                }
            }
            if (this.isClose) {
                this.show = false;
            }
            document.querySelector('body').style.overflowY = 'auto';
            this.$emit('closed', this.$el);
        }

    }
});